<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>发布炫</title>
		<link rel="stylesheet" type="text/css" href="../../css/aui-win.css" />
		<style>
			.upImg {
				width: 100%;
				border-bottom: 1px solid gray;
			}
			#myheader li {
				float: left;
				width: 31%;
				height: 100px;
				margin: 0px 1% 5px 1%;
				list-style: none;
			}
			#myheader li img {
				width: 100%;
			}
			.upImg img {
				width: 31%;
				height: 100px;
				margin-left: 1%;
			}
			textarea {
				margin-top: 10px;
				width: 86%;
				height: 300px;
				margin-left: 5%;
				padding: 5px 2% 0px 2%;
				border: 1px solid gray;
			}
			.subBtn {
				line-height: 35px;
				text-align: center;
				display: block;
				height: 35px;
				width: 90%;
				margin-left: 5%;
				font-size: 14px;
				color: rgba(255,255,255,1);
				border: 1px solid rgba(0,0,0,0.2);
				background-color: #00ABFD;
				border-radius: 5px;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				margin-top: 5px;
				text-align: center;
			}
			#showimg
			{
				background-image: url(../image/home/changyongtongxunlu.png);
			}
		</style>
		<script src="../../script/jquery-1.10.2.min.js"></script>
		<script src="../../script/common.js"></script>
	</head>
	<body style="height: 100%;">
		<header class="aui-bar aui-bar-nav aui-bar-yunzo" id="aui-header" >
			<a class="aui-btn aui-bar-yunzo aui-pull-left" id="back" > <span class="aui-iconfont aui-icon-left" ></span> </a>
		<div class="aui-title" id="partName">发布炫</div>
		</header>

	<div class="upImg">
			<ul style="margin-top:10px;" id="myheader"></ul>
			<input type="file" accept="image/*"  id="showimg" name="showimg" >
		<!--	<img src="../../image/home/busess/upimg.png" alt="" class="personal_logo"  onclick="showimg.click()">-->
		</div>
		<textarea id="xuanCot" onclick="clearCot()">请输入文字内容</textarea>
		<div>
			<input class="subBtn" type="button" value="提交" onclick="subClick();" />
		</div>
        <!--加载loading功能-->
        <div id="loadIng_startStop" style="width: 100%;height: 100%;position: absolute;z-index: 1000;display: none;">
            <div class="div_loding_img">
		数据加载中
	</div>
        </div>
</body>

<script type="text/javascript">
var infovalue;
var imageurl;
var myheader;
$(document).ready(function(){
	goback("showme_list.html");
	infovalue=$('#xuanCot');
	myheader=$('#myheader');
});


function clearCot() {
	if (infovalue.val() == "请输入文字内容") {
		infovalue.val("");
	}
}
/*选择图片并上传*/
$("#showimg").change(function(){
	fileSelected();
});

function fileSelected() {
    var file = document.getElementById('showimg').files[0];
    if (file) {
    	previewImage(file);
    }
  }

  function uploadFile() {
    var fd = new FormData();
    fd.append("showimg", document.getElementById('showimg').files[0]);
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);
    xhr.open("POST", "../../../api/file/upload");
    xhr.send(fd);
  }

  function uploadProgress(evt) {
    if (evt.lengthComputable) {
      var percentComplete = Math.round(evt.loaded * 100 / evt.total);
      //document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
    }
    else {
    //  document.getElementById('progressNumber').innerHTML = 'unable to compute';
    }
  }

  function uploadComplete(evt) {
	  var obj = JSON.parse(evt.target.responseText);
	  alert(obj);
	  if(obj.datum.length>0)
		{
		  for(var i=0;i<obj.datum.length;i++)
			{
			  imageurl+=obj.datum[i].showimg;
			}
			 alert(imageurl);
			saveinfo();
		}else{
			alert("图片上传失败,请重新选择图片!");
		}
	
  }
  function uploadFailed(evt) {
	  alert("图片上传失败,请重新选择图片!");
  }

  function uploadCanceled(evt) {
    alert("上传已经取消,请重新选择图片!");
  }
  //图片上传预览    IE是用了滤镜。
  function previewImage(file)
  {
    myheader.html("");
    var html="";
    console.log("文件："+file);
    if (file.length>0)
    {
    	for(var i=0;i<file.length;i++)
    	{
    		html+='<li><img src="'+getObjectURL(file[i])+'"></li>';
    	}
    	console.log(html);
    	myheader.html(html);
    }
  }
//建立一個可存取到該file的url
  function getObjectURL(file) {
  	var url = null ; 
  	if (window.createObjectURL!=undefined) { // basic
  		url = window.createObjectURL(file) ;
  	} else if (window.URL!=undefined) { // mozilla(firefox)
  		url = window.URL.createObjectURL(file) ;
  	} else if (window.webkitURL!=undefined) { // webkit or chrome
  		url = window.webkitURL.createObjectURL(file) ;
  	}
  	return url ;
  }
function subClick() {
alert( '1111');
	if (infovalue.val() != "请输入文字内容" && infovalue.val().length > 2 && imageurl.length > 0) {
		uploadFile();
	} else {
		alert( '请必须输入有效内容及图片!');
	}
}
function saveinfo()
{
	var bodyParam = {"groupid":$groupid,"mid":$mid,"did":initdata.get('showmeinfo'),"type":0,"scomment": infovalue.val(),"simage": imageurl};
	 alert(bodyParam);
	ajaxCoCRequest('../../../api/group/sendshowmeinfo', 'POST', bodyParam, function(msg) {
		if (msg.code==100) {
			alert( '您的信息已经修改成功！');
		} else {
			alert( '您的信息已经修改失败!');
		}
	});	
}

/*loading加载转圈*/
sTart_Stop();
</script>
</html>